import React from "react";
import { isValidArr } from "@/utils";
import { RankItemComp } from "@/components/pages/rank";
import { motion } from "framer-motion";

const pageName = "rank.list";
const klassName = pageName.replace(/\./g, '-');


export default function Comp({ data, self }) {
  const containerVar = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        delayChildren: 0.05,
        staggerChildren: 0.05,
      }
    },
  };

  const itemVar = {
    hidden: { y: 50, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
    },
  };

  return (
    <div className={`cp-${klassName}`}>
      <div className="inner">
        <div className="cp-rank-columns">
          <div className="inner">
            <div className="rank">
              排名
            </div>
            <div className="profile">
              用户昵称
            </div>
            <div className="value">
              智电积分
            </div>
          </div>
        </div>

        {
          data?.length ?
            <motion.div className="content"
              variants={containerVar}
              // initial="hidden"
              animate="visible"
              exit="exit"
              style={{ minHeight: "calc(100vh - 3.6rem - 18vh)", maxHeight: "400px" }}
            >
              {
                data.map((item, index) => {
                  // if (item.rank <= 3) return null;
                  return (
                    <motion.div key={index} variants={itemVar}>
                      <RankItemComp item={item} key={index} />
                    </motion.div>
                  )
                })

              }
            </motion.div>
            :
            <motion.div className="content text-center p-3">
              无数据
            </motion.div>
        }
      </div>
    </div>
  )
}